<template>
  <div style="width: 100%;height: 350px;" @mouseover="mouseOver" @mouseleave="mouseLeave">
    <el-row :class="mouseOverIf === true ? 'mouseOverCss' :''">
      <el-col :span="12">
        <div style="display: flex;">
          <div style="height: 300px;width: 200px;margin-bottom: auto;margin-top: auto;margin-left: 1%">
            <img style="width: 100%;height: 100%;object-fit:cover" :src="myData.bookPicture">
          </div>
          <div style="margin-left: 2%;width: 400px;height: max-content;
              margin-top: auto;margin-bottom: auto;color: #7a7777;">
            {{ myData.bookName }}
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div style="height: 300px;display: flex;">
          <div style="margin-left: 2%;margin-top: auto;margin-bottom: auto;color: #7a7777;">
            ￥ {{ myData.price }}
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div style="height: 300px;display: flex;">
          <div style="margin-left: 2%;margin-top: auto;margin-bottom: auto;color: #7a7777;">
            {{ myData.quantity }}
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div style="height: 300px;display: flex;">
          <div style="margin-left: 2%;margin-top: auto;margin-bottom: auto;color: #7a7777;">
            ￥ {{ myData.total }}
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div style="height: 300px;display: flex;">
          <div style="margin-left: 2%;margin-top: auto;margin-bottom: auto;color: #7a7777;">
            {{ myData.state }}
          </div>
        </div>
      </el-col>
    </el-row>
    <el-divider border-style="dotted" style="width: 90%;margin-left: auto;margin-right: auto" />
  </div>
</template>

<script setup>

import {ref} from "vue";

const myProps = defineProps({
  myData: {
    type: Object,
    default: {
      orderId: 1,
      bookName: "我是鲁滨逊",
      bookPicture: "",
      price: 1,
      quantity: 1,
      state: "未知",
      total: ""
    }
  }
})

let mouseOverIf = ref(false)

const mouseOver = ()=>{
  console.log("鼠标进入")
  mouseOverIf.value = true
}

const mouseLeave = ()=>{
  console.log("鼠标出去")
  mouseOverIf.value = false;
}

</script>

<style scoped>
.mouseOverCss{
  background-color: #f5f7fa;
}
</style>
